<!-- 编辑器模板管理 -->
<template>
  <div class="editor-business-page">
    <leftTree
      :addPermi="['editor:documentTemplateClassify:add']"
      :editPermi="['editor:documentTemplateClassify:edit']"
      :removePermi="['editor:documentTemplateClassify:remove']"
      :fetchMethod="getTemplateTree"
      :deleteMethod="deleteTemplateTreeNode"
      :handleTreeNode="handleTemplateTreeNode"
      @fetched="handleFetched"
      @updateSelectedNode="updateSelectedNode"
    />
    <div class="content">
      <rightContent :selectedNode="selectedNode" @openEditor="openEditor" />
    </div>
  </div>
</template>
<script>
import { getTemplateTree, deleteTemplateTreeNode, handleTemplateTreeNode } from '@/api/business'
import leftTree from '@/views/editor/__components__/LeftTree.vue'
import rightContent from '@/views/editor/__components__/TemplateRightContent'
export default {
  components: { leftTree, rightContent },
  props: {
    openEditor: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      treeData: [],
      selectedNode: {}
    }
  },
  provide() {
    return {
      componentType: 'template',
      getTreeData: () => this.treeData
    }
  },
  methods: {
    getTemplateTree,
    deleteTemplateTreeNode,
    handleTemplateTreeNode,
    handleFetched(data) {
      this.treeData = data
    },
    updateSelectedNode(node) {
      this.selectedNode = node
    }
  }
}
</script>
<style>
.editor-business-page {
  width: 100%;
  max-height: 100vh;
  display: flex;
  font-family: 'microsoft yahei';
}
.editor-business-page .content {
  flex: 1;
}
.business-dialog,
.business-dialog .el-textarea__inner {
  font-family: 'microsoft yahei';
}
.business-pager {
  display: flex;
  justify-content: flex-end;
  /* margin-top: 15px; */
}
.el-select-dropdown {
  font-family: 'microsoft yahei';
}
</style>
